<!--
 * @Description: 流程审批日志预览
 * @Author: DHL
 * @Date: 2022-09-14 11:09:34
 * @LastEditors: DHL
 * @LastEditTime: 2024-02-07 09:16:01
-->
<template>
  <tw-drawer v-model="visible" title="审批日志" size="800px" :sticky="false" @close="handleClose">
    <div v-if="procInst.procDefKey" class="flow-log" v-loading="loading">
      <tw-flow
        ref="flowRef"
        :procDefKey="procInst.procDefKey"
        :procName="procInst.procDefName"
        :businessKey="procInst.businessKey"
        :loading="loading"
        action="view"
        @update:loading="handleLoading"
      >
        <div class="title">{{ procInst.name }}</div>
        <div class="time">申请日期：{{ procInst.startTime }}</div>
      </tw-flow>
    </div>
  </tw-drawer>
</template>

<script setup lang="ts">
  import { nextTick, ref } from 'vue'

  /**
   * 显示弹框
   */
  const visible = ref(false)

  const loading = ref(false)

  const procInst = ref({} as any)

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 打开弹框
   */
  function handleOpen(params) {
    visible.value = true
    nextTick(() => {
      procInst.value = params
    })
  }

  /**
   * 关闭弹框
   */
  function handleClose() {
    visible.value = false
  }

  /**
   * 加载动画
   * @param val
   */
  function handleLoading(val: boolean) {
    console.info(val)
    loading.value = val
  }

  //////////////////////////////////////////////////
  // 暴露出去，父组件才可以调用到
  //////////////////////////////////////////////////
  defineExpose({
    handleOpen
  })
</script>

<style scoped lang="scss">
  .flow-log {
    :deep(.tw-flow-wrapper) {
      .flow_footer {
        display: none;
      }
    }

    .title {
      padding: 10px 0px;
      font-size: 20px;
      font-weight: 600;
    }

    .time {
      padding: 10px 0px;
    }
  }
</style>
